<template>
  <div class="goods-list">
    <div class="goods-add">
      <el-button type="primary" @click="cutCreateGoods">新建商品</el-button>
    </div>
    <div class="goods-fun">
      <div class="goodsnm">
        <span>商品名称</span>
        <div class="ipt">
          <el-input v-model="goodsnm" placeholder="请输入商品名称" />
        </div>
      </div>
      <div class="price">
        <span>商品价格</span>
        <div class="ipt">
          <el-input v-model="min" placeholder="请输入" />
        </div>
        -
        <div class="ipt">
          <el-input v-model="max" placeholder="请输入" />
        </div>
      </div>
      <div class="btn-box">
        <el-button type="primary" :plain="true">提交</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="goodsData" style="width: 100%" height="400">
        <el-table-column fixed prop="id" label="商品ID" width="150" />
        <el-table-column prop="goodsnm" label="商品" width="180" />
        <el-table-column prop="price" label="价格" width="180" />
        <el-table-column prop="sales" label="销量" width="180" />
        <el-table-column prop="classify" label="分类" width="180" />
        <el-table-column prop="count" label="库存" width="180" />
        <el-table-column prop="code" label="状态" width="180" />
        <el-table-column fixed="right" label="操作" width="180">
          <template v-slot="scope">
            <el-button
              type="primary"
              size="small"
              @click="putaway(scope.row.id)"
              >上架</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="soldout(scope.row.id)"
              >下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
let goodsnm = ref("");
let min = ref("");
let max = ref("");
let goodsData = ref([]);

// 上架按钮点击事件
const putaway = (id) => {
  axios
    .post("http://192.168.27.59/goods/alterGoods", {
      id,
      code: 0,
    })
    .then((res) => {
      getGoodsList();
      ElMessage({
        message: res.data.message,
        type: "success",
      });
    });
};
// 下架按钮点击事件
const soldout = (id) => {
  axios
    .post("http://192.168.27.59/goods/alterGoods", {
      id,
      code: 1,
    })
    .then((res) => {
      ElMessage({
        message: res.data.message,
        type: "success",
      });
      getGoodsList();
    });
};

// 新建商品按钮点击跳转事件
const cutCreateGoods = () => {
  router.push({ path: "/home/create" });
};
// 获取商品列表
let getGoodsList = () => {
  axios.get("http://192.168.27.59/goods/goodslist").then(({ data }) => {
    console.log(data);
    goodsData.value = data;
  });
};
getGoodsList();
</script>

<style lang="scss" scoped>
.goods-list {
  width: 60vw;
  margin: 0 auto;
  .goods-add {
    width: 100%;
    padding: 0.625rem;
    background-color: #fff;
    border-radius: 0.625rem;
  }
  .goods-fun {
    width: 100%;
    background-color: #fff;
    padding: 0.9375rem 0.625rem;
    border-radius: 0.625rem;
    margin: 0.9375rem 0;
    display: flex;
    .goodsnm {
      display: flex;
      white-space: nowrap;
      align-items: center;
      font-size: 13px;
      span {
        margin-right: 0.625rem;
      }
      .ipt {
        width: 10vw;
      }
    }
    .price {
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin: 0 1.25rem;

      span {
        margin-right: 10px;
        font-size: 13px;
      }
      .ipt {
        width: 5vw;
      }
    }
  }
  // 按钮
  .btn-box {
    display: flex;
    justify-content: flex-end;
    padding: 1.625rem;
    button {
      width: 6rem;
    }
  }
}
</style>
